<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warpper {
            background-image: url("icons.png");
            height: 23px;
            width: 22px;
            border: 1px solid red;
        }
        
        .star {
            background-position: 0px -149px;
        }
        
        .star:hover {
            background-position: 0px -99px;
        }
        
        .email {
            background-position: 1px -195px;
        }
        
        .qq {
            background-position: 1px -246px;
        }
        
        .qw {
            background-position: -15px -297px;
        }
        
        .qe {
            background-position: -15px -346px;
        }
        
        .qr {
            background-position: -15px -393px;
        }
        
        .qa {
            background-position: -15px -446px;
        }
        
        .qd {
            background-position: 2px -495px;
        }
        
        .qlo {
            background-position: 2px -543px;
        }
        
        .lop {
            background-position: -4px -602px;
        }
        
        .mlk {
            background-position: -10px -658px;
        }
        
        .iop {
            background-position: -11px -708px;
        }
        
        .kol {
            background-position: -11px -754px;
        }
        
        .mk {
            background-position: -11px -808px;
        }
        
        .k {
            background-position: 7px -843px;
        }
        
        .p {
            background-position: 7px -843px;
        }
        
        .o {
            background-position: 18px -992px;
        }
        
        .n {
            background-position: 4px -1043px;
        }
        
        .i {
            background-position: 4px -1093px;
        }
        
        .h {
            background-position: 1px -1148px;
        }
        
        .c {
            background-position: -2px -1199px;
        }
        
        .m {
            background-position: -10px -1258px;
        }
        
        .r {
            background-position: -10px -1309px;
        }
    </style>
</head>

<body>
    <div class="warpper star">

    </div>
    <div class="warpper email">

    </div>
    <div class="warpper qq">

    </div>
    <div class="warpper qw">

    </div>
    <div class="warpper qe">

    </div>
    <div class="warpper qr">

    </div>
    <div class="warpper qa">

    </div>
    <div class="warpper qd">

    </div>
    <div class="warpper qlo">

    </div>
    <div class="warpper lop">

    </div>
    <div class="warpper mlk">

    </div>
    <div class="warpper iop">

    </div>
    <div class="warpper kol">

    </div>
    <div class="warpper mk">

    </div>
    <div class="warpper k">

    </div>
    <div class="warpper p">

    </div>
    <div class="warpper o">

    </div>
    <div class="warpper n">

    </div>
    <div class="warpper i">

    </div>
    <div class="warpper h">

    </div>
    <div class="warpper c">

    </div>
    <div class="warpper m">

    </div>
    <div class="warpper r">

    </div>
</body>

</html>